@import "colors.css";
@import "core.css";




/* CABEÇALHO */
.topbar { background-color: var(--cor-base); height: 2.5rem; display: flex; align-items: center; }
.topbar * { color: var(--cor-fonte-base); }
.topbar .fones span { display: inline-block; margin-right: .5rem; font-size: .85rem;}
.topbar i { color: var(--cor-fonte-base-ico); }
.topbar .redes { display: none; }
.topbar .redes a {  margin-left: 1rem; font-size: 1.2rem;}
.topbar .redes i:hover { font-size: 1.3rem; }
header {  background-color: #251b0e; position: sticky; top: 0; z-index: 300; box-shadow: 0px 5px 15px rgb(0 0 0 / 20%);}
nav { display: none; } /* para não exibir no Mobile */
.logo { max-height: 80%; }
.ico-menu-lateral { color: var(--cor-fonte-base-inf); margin-right: 1rem; }
/* END CABEÇALHO */

/* HOME */
#home { height: calc(100% - 8.5rem); position: relative; } /* Deve descontar a altura do cabeçalho */
/* END HOME */

/* whats flutuante */
.whats-flutuante1 { position: fixed; right: 1.5rem; bottom: .5rem; z-index: 1100; }
.whats-flutuante1 img { width: 4rem;}
.whats-flutuante1-multi { border: 2px solid #d4d4d4; background-color: white; border-radius: 10px;  min-width: 150px; margin-bottom: .5rem;}
.whats-flutuante1-multi a {display: flex; align-items: center; justify-content: left; padding: .5rem; text-decoration: none; font-size: .9rem; color: #666; border-radius: 5px;}
.whats-flutuante1-multi a:hover { background-color: #efeeee;} 
.whats-flutuante1-multi a i { color: black  ;} 

/* DESTAQUE */
#gad-destaque { height: 100%; position: relative; }
.painel-fotos { overflow: hidden; white-space: nowrap; width: 100%; height: 100%; }
.painel-foto { display: inline-block; position: relative; z-index: 100; width: 100%; height: 100%;  
  background-size: cover; background-position: center center;  background-repeat: no-repeat; 
}
.painel-foto-info { background-color: rgb(0,0,0,.6); position: absolute; bottom: 0; width: 100%; }
.painel-foto-info .infos { padding: 4rem 1rem; }
.painel-foto-info .titulo-slide { font-size: 1.5rem; margin: 0; white-space: normal;}
.painel-foto-info .desc-slide { font-size: 1rem; margin: 0; white-space: normal}
.box-seta-esq, .box-seta-dir { position: absolute; top: 40%; z-index: 200 }
.box-seta-esq { left: 1rem }
.box-seta-dir { right: 1rem }
.seta-lan { color: var(--cor-base-contra); font-size: 6rem; font-weight: bold; cursor: pointer}
.box-bolinhas { display: none; }
.bolinha { display: inline-block; width: 1.7rem; height: 1.7rem; background-color: white; 
  border-radius: 50%; border: 1px solid #d4d4d4; cursor: pointer; margin-right: 5px; }
.bolinha.ativa { background-color: #666}
/* END DESTAQUE */

/* GAD CONTEUDO */
.gad-conteudo { padding: 1.5rem 0; }
.gad-conteudo p { margin: 0; }
.conteudo-infos { flex-direction: column-reverse; }
.conteudo-texto { padding-top: 1.5rem; }
.conteudo-img { background-size: cover; max-height: 350px; min-height: 200px;}
.conteudo-fotos { padding: 2rem 0; }
.conteudo-foto { background-size: cover; display: inline-block; width: 100%; height: 10rem; border-radius: 5px; border: 2px solid #a3a3a3; cursor: pointer; }
/* END GAD CONTEUDO */

/* COLECAO */
.gad-colecao { padding: 1.5rem 0; min-height: 300px; }
.colecao-cats { flex-direction: column;}
.colecao-item { background-color: white; margin: 1%; border-radius: 5px; padding: 1rem; box-shadow: 0px 2px 15px rgb(0 0 0 / 10%); }
.colecao-item:hover { padding-top: 2rem; background-color: var(--cor-bg-content); }
.colecao-item-tit { color: var(--cor-base-contra); }
.colecao-fotos { padding: 2rem 0; }
.colecao-img, .colecao-img-item { background-size: cover; width: 100%; height: 10rem; border-radius: 5px; border: 2px solid #a3a3a3; cursor: pointer; margin-bottom: .5rem;}
/* END COLECAO */

/* ROTATIVO */
.gad-rotativo { padding: 5rem 1rem;  background-position: center center;   background-attachment: fixed;  background-size: cover }
.rotativo-titulo { font-size: 1.5rem; }
.rotativo-info { font-size: .8rem; }
/* END ROTATIVO */

/* GAD CONTATO */
.gad-contato { padding: 1.5rem 0 }
.gad-contato p { margin: .5rem 0;}
.gad-contato .fa { font-size: 2rem; color: var(--cor-base-contra); width: 3.5rem; height:3.5rem; text-align: center;  border-radius: 50%; padding: 8px; border: 2px dotted var(--cor-base-contra); }
.contato-form-infos { flex-direction: column; justify-content: space-between;}
.form-contato, .form-infos { background-color: white; }
.form-infos > div:not(:last-child) { border-bottom: 1px dashed #efeeee; }
.form-contato label { display: block; }
.form-contato input, .form-contato textarea { border: 1px solid #efeeee; margin-bottom: 15px;}
.maps-google { border-radius:5px; border: 2px solid  #efeeee; width: 100%; height: 300px; }
.contato-map { margin-top: 2rem; background-color: white;}

form label { color: white; margin-top: 10px; display: inline-block; font-size: .9rem;}
/* END CONTATO */

/* CTO botos */
.cto-botoes { font-size: .9rem; font-weight: bold; font-family: MontSerrat; display: inline-block; width: 200px; 
    border-radius: 5px; background-color: white; padding: 15px 0; text-decoration: none;}
.cto-botoes:hover { background-color: #efeeee;}
#barraContato1, #barraContato2 { background-color: rgb(77, 77, 78); text-align: center; }
.titulo-contato { color: white; font-family: OpenSans; font-size: 2rem; margin-top: 0; }






/* Home */
#home { background-image: url('../../assets/img/bgMarmore.jpg'); background-size: cover; height: 570px }
.home-titulo { color: black; font-weight: bold; font-size: 2rem; padding: 5rem 0; }

/* Sobre */
#sobre { background-image: url('../../assets/img/bgGradiente.jpg'); background-size: cover; padding-top: 2rem; padding-bottom: 2rem }

/* Serviços */
.img-servicos { width: 100%;}

/* Empresa */
.img-empresa {  width: 100%; border-radius: 5px;}

.msg-erro { color: orangered;}
/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

  /* CABEÇALHO ----------------*/
  .topbar .content { display: flex; justify-content: space-between; align-items: center;}
  .topbar .fones span { font-size: .9rem;}
  .topbar .redes { display:initial }
  nav { display: block; height: 90%;}
  nav ul { display: flex; list-style-type: none; color: var(--cor-fonte-base-inf); padding: 0; margin: 0;; height: 100%;}
  nav li { margin-left: 1rem; padding: 10px; display: flex; align-items: center; border-radius: 5px; color: white; font-family: MontSerrat; font-size: .8rem;}
  nav li:hover, nav li.active { background-color: #32281a; color: white; }
  .ico-menu-lateral { display: none; }
  
  nav i { color: white; font-size: 1.2rem !important;}
  nav i:hover { color: white;}


  /* END CABEÇALHO */

  /* DESTAQUE */
  .box-bolinhas { display: block; position: absolute; top: 1rem; height: 2rem; width: 100%; z-index: 250; text-align: center; }
  .painel-foto-info .infos { padding: 4rem 4rem; }
  .painel-foto-info .titulo-slide { font-size: 2rem; }
  .painel-foto-info .desc-slide { font-size: 1.2rem; }
  /* DESTAQUE */

  /* GAD CONTEUDO */
  .conteudo-infos { flex-direction: row; }
  .conteudo-texto { width: 60%; }
  .conteudo-img { width: 40%; }
  .conteudo-foto { display: inline-block; width: 20%; margin-right: 1rem; }
  /* GAD CONTEUDO */


  /* GAD COLEÇÂO */
  .colecao-cats { flex-direction: row; flex-wrap: wrap;}
  .colecao-item { width: 31%; }
  .colecao-img { display: inline-block; width: 20%; margin-right: 1rem ;}
  /* END GAD COLEÇÂO */
  
  /* ROTATIVO */
  /* .gad-rotativo { padding: 100px; } */
  .rotativo-titulo { font-size: 2rem; margin-top: 0; margin-bottom: 3rem;}
  .rotativo-info { font-size: 1.1rem; }
  /* END ROTATIVO */

  /* CONTATo */
  .contato-form-infos { flex-direction: row; }
  .form-contato, .form-infos { width: 49% }
  /* END CONTATo */

  .home-titulo { font-size: 4rem; padding: 0; }

  .img-servicos { width: 70%;}
  
  .img-empresa { margin-left: 2.0}
  .txt-quem-somos { padding-right: 1.5rem; }
}

@media (min-width: 768px) {
  .fotos-escritorio { width: 49%; }
 }

@media (min-width: 992px) { .fotos-escritorio { width: 33%; } }

@media (min-width: 1200px) { }